<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no, email=no"/>
<meta charset="UTF-8">
<title>我的收藏</title>
<link rel="stylesheet" href="/apollo/css/aui/core.css">
<link rel="stylesheet" href="/apollo/css/aui/icon.css">
<link rel="stylesheet" href="/apollo/css/aui/home.css">
<link rel="stylesheet" type="text/css" href="/apollo/css/aui/aui-pull-refresh.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
<style>
.n-tabs {
	position: fixed;
	top:44px;
	left: 0;
	width: 100%;
	height: 41px;
	z-index: 1000;
	background-color: #fff;
	box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
	-webkit-box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
	-moz-box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
}
.n-tabs-a {
	margin:100px 0 0 0;
}
.n-tabs .edge {
	position: fixed;
	top: 0;
	height: 41px;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
}
.n-tabs .n-tabContainer {
	-webkit-overflow-scrolling: touch;
	position: relative;
	top: 0;
	left: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding-left: 16px;
	/*height: 51px;*/
	font-size: 14px;
	color: #333;
	white-space: nowrap;
}
.n-tabs .n-tabContainer .navtab {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}
.n-tabs .n-tabContainer .n-tabItem {
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	display: inline-block;
	height: 41px;
	line-height: 41px;
	text-align: center;
	margin-left: 20px;
}
.n-tabs .n-tabContainer .n-tabItem:first-child {
	margin-left: 0;
}
.n-tabs .n-tabContainer .n-tabItem .current {
	display: inline-block;
	height: 41px;
	border-bottom: 2px solid #e31436;
	color: #e31436;
}
.n-tabs .n-tabContainera {
	-webkit-overflow-scrolling: touch;
	position: relative;
	top: 0;
	rignt: 0;
	overflow-x: auto;
	overflow-y: hidden;
	height: 51px;
	font-size: 14px;
	color: #333;
	white-space: nowrap;
}
.m-actionsheet {
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #EFEFF4;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
 	-webkit-transition: -webkit-transform .3s;
 	transition: -webkit-transform .3s;
 	transition: transform .3s;
 	transition: transform .3s, -webkit-transform .3s;
}
.actionsheet-toggle {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.actionsheet-item {
	display: block;
	position: relative;
	font-size: 0.8rem;
	color: #555;
	height: 2rem;
	line-height: 2rem;
	background-color: #FFF;
}
.actionsheet-item:after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #D9D9D9;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.actionsheet-action {
	display: block;
 	margin-top: .15rem;
	font-size: 0.8rem;
	color: #555;
	height:2rem;
	line-height: 2rem;
	background-color: #FFF;
	position:absolute;
	top:10px;
	right:0;
	padding:0 2px;
}
.dropbtn {
      border: none;
      cursor: pointer;
  }

  .dropbtn:hover, .dropbtn:focus {
      background-color: #FAFAFA;
  }

  .dropdown {
      width: 100%;
      height: 40px;
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }

  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  .dropdown a:hover {background-color: #f1f1f1}

  .show {display:block;}
  .open{
      height: 800px;
background: rgba(0,0,0,.5);
  }
  /*栅格类*/
.aui-row {
	overflow: hidden;
	margin: 0;
}
.aui-row-padded {
	margin-left: -0.125rem;
	margin-right: -0.125rem;
}
.aui-row-padded [class*=aui-col-xs-] {
	padding: 0.125rem;
}
.aui-col-xs-1,.aui-col-xs-2,.aui-col-xs-3,.aui-col-xs-4,.aui-col-xs-5,.aui-col-xs-6,.aui-col-xs-7,.aui-col-xs-8,.aui-col-xs-9,.aui-col-xs-10,.aui-col-xs-11,.aui-col-5 {
	position: relative;
	float: left;
}
.aui-col-xs-12 {
	width: 100%;
	position: relative;
}
.aui-col-xs-11 {
	width: 91.66666667%;
}
.aui-col-xs-10 {
	width: 83.33333333%;
}
.aui-col-xs-9 {
	width: 75%;
}
.aui-col-xs-8 {
	width: 66.66666667%;
}
.aui-col-xs-7 {
	width: 58.33333333%;
}
.aui-col-xs-6 {
	width: 50%;
}
.aui-col-xs-5 {
	width: 41.66666667%;
}
.aui-col-xs-4 {
	width: 33.33333333%;
}
.aui-col-xs-3 {
	width: 25%;
}
.aui-col-xs-2 {
	width: 16.66666667%;
}
.aui-col-xs-1 {
	width: 8.33333333%;
}
.aui-col-5 {
	width: 20%;
}
.collocation{
	display:none;
}
.num{
	justify-content: center;
    align-items: center;
    color: #646464;
    font-weight: bold;
    text-align: center;
    }
    /*toast*/
.aui-toast {
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	border-radius: 0.25rem;
	color: #ffffff;
	position: fixed;
	z-index: 3;
	top: 45%;
	left: 50%;
	width: 7.5em;
	min-height: 6em;
	margin-left: -3.75em;
	margin-top: -4rem;
	display: none;
}
.aui-toast .aui-iconfont {
	margin-top: 0.2rem;
	display: block;
	font-size: 2.6rem;
}
.aui-toast-content {
  margin: 0 0 0.75rem;
}
.aui-toast-loading {
    background-color: #ffffff;
    border-radius: 100%;
    margin: 0.75rem 0;
    -webkit-animation-fill-mode: both;
        	animation-fill-mode: both;
    border: 2px solid #ffffff;
    border-bottom-color: transparent;
    height: 2.25rem;
    width: 2.25rem;
    background: transparent !important;
    display: inline-block;
    -webkit-animation: rotate 1s 0s linear infinite;
        	animation: rotate 1s 0s linear infinite;
}
@font-face {
	font-family: "aui_iconfont";
	src: url('aui-iconfont.ttf') format('truetype');
}
.aui-iconfont {
	position: relative;
	font-family:"aui_iconfont" !important;
	font-size: 0.7rem;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.aui-icon-laud:before { content: "\e64b"; }
</style>
</head>
<body>
<header class="aui-header-default aui-header-fixed aui-header-bg"> 
	<a href="javascript:history.back(-1)" class="aui-header-item"> 
	 	<i class="aui-icon aui-icon-back-white"></i> 
	</a>
  <div class="aui-header-center aui-header-center-clear">
    <div class="aui-header-search-box"> 
    	<i class="aui-icon aui-icon-small-search"></i>
      	<input id="searchKey" type="text"  placeholder="请输入产品名称或关键词" class="aui-header-search">
    </div>
  </div>
  <a href="#" class="aui-header-item-icon" onclick="queryCargo()" style="font-size:1.2em"> 搜索</a> 
</header>

<div style="height:50px"></div>
<div class="collocation" >
 	<li  class="aui-list-item" style="padding-top:0px;">
       <div class="aui-list-item-inner" style="text-align:center;padding:1px;margin:5px">
           <div class="aui-col-xs-5 collocationId" ></div>
           <input style="display:none" name="collocationIds" class="collocationIds" value="">
           <div class="aui-col-xs-2 realPrice"></div>
           <input style="display:none" name="buyNums" class="buyNums" value="">
            <div class="d4 aui-col-xs-5 collocationNum" >
            	
            	<div class="aui-col-xs-12" >
            		<a  href="javascript:;" onclick="minusNum(this)" class="minus aui-col-xs-3"></a> 
            		<label class="num aui-col-xs-6"  style="height:30px;width:50%">1</label> 
            		<a href="javascript:;" onclick="plusNum(this)" class="plus aui-col-xs-3"></a> 
            	</div>
            </div>
       </div>
    </li>
</div>

<div id="tableContent" class="aui-refresh-content" >
  		<c:import url="output.jsp" />
</div>
<div class="m-actionsheet" id="actionSheet">
   <div class="xx12"> 
     <t:form  action="/wechat/shop/save?shopId=${shop.shopId}" method="post" cssClass="form-horizontal">
     	<input style="display:none" name="shopId"  value="${shop.shopId}">
     	<input style="display:none" name="customerId"  value="${customer.customerId}">
        <li class="aui-list-item" style="padding-top:0px;background-color:#f4f4f4;" id="collocationIndex">
           <div class="aui-list-item-inner" style="text-align:center;padding:1px;margin:5px">
               <div class="aui-col-xs-5">规格</div>
               <div class="aui-col-xs-2 ">价格</div>
               <div class="aui-col-xs-5 ">数量</div>
           </div>
        </li>
        <li class="aui-list-item" style="padding-top:0px;" id="collocationIndex">
          <div class="aui-list-item-inner" style="text-align:center;padding:0px;margin:0px">
              <div class="aui-col-xs-5" style="height:50px;display:table">
              	<label style="display:table-cell;text-align:center;vertical-align:middle;">小计:<p style="color:#FE5E76" id="totalPrice"></p></label>
              </div>
              <div class="aui-col-xs-7" style="background-color:#FE5E76;height:50px;color:white;display:table">
              	<label onclick="saveData()" style="display:table-cell;text-align:center;vertical-align:middle;" "><a >加入购物车</a></label>
              </div>
             
          </div>
        </li>
        </t:form>
     </div>
</div>
<div style="height:100px"></div>

<input style="display:none" class="shopId" value="${shop.shopId }">
<input style="display:none" id="customerId" value="${customer.customerId}">


<script type="text/javascript" src="/apollo/js/common/jquery.min.js"></script> 
<script type="text/javascript" src="/apollo/js/aui/aui.js"></script> 
<script type="text/javascript" src="/apollo/js/aui/aui-toast.js"></script> 
<script type="text/javascript" src="/apollo/js/aui/aui-pull-refresh.js"></script>
<script>
function saveData(lBtn){
	var parm=$("form:first").serialize();
	var url =$.getVirtualPath()+"/wechat/shop/save";
    $.ajax({
        type: 'post',
        dataType: "json",
        url: url,
        data: parm,
        async: false,
        success: function (result) {
        	if(result!=null){
        		if(result.resultType=="success"){
        			showDefault("success");        			
       		        var $myAs = $('.mask-black');
       				var actionSheet=$("#actionSheet");
            		$myAs.toggle();
       				actionSheet.toggle(); 
        		}else{
        			showDefault("error");   
        		}
    		}
       	}
    });
}

var toast = new auiToast();
function showDefault(type){
    switch (type) {
    case "success":
        toast.success({
            title:"提交成功",
            duration:2000
        });
        break;
        case "error":
            toast.fail({
                title:"提交失败",
                duration:2000
            });
            break;
        case "custom":
            toast.custom({
                title:"提交成功",
                html:'<i class="aui-iconfont aui-icon-laud"></i>',
                duration:2000
            });
            break;
      
        default:
           
            break;
    }
}

function queryCargo(){
	var searchKey=$("#searchKey").val();
	var customerId=$("#customerId").val();
	pageIndex=1;
	console.log(searchKey)
	var shopId=$(".shopId").val();
	var url="/apollo/wechat/favorite/favoriteList?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId+"&searchKey="+searchKey+"&customerId="+customerId;
	
	$("#tableContent").load(url," #tableContent");
	
}


window.onload=function (){
	pictureLoad();
}
function pictureLoad(){
	$("img[name='pictureLoad']").each(function(){
	    var url=$(this).data("url");
	    $(this).attr("src",url);
	});
}
function minusNum(element){

	var t = $(element).parent().find('.num');
	
	t.text(parseInt(t.text()) - 1);
	if (t.text() <= 1) {
		t.text(1);
	}
	totalPrice();
}

function plusNum(element){
	var t = $(element).parent().find('.num');
	t.text(parseInt(t.text()) + 1);
	if (t.text() <= 1) {
		t.text(1);
	}
	totalPrice();
}

function totalPrice(){
	var totalPrice=0;
	$(".num").each(function(){
		var num=$(this).text();
		var price=$(this).parent().parent().siblings(".realPrice").text();
		//$(this).parent().parent().siblings(".collocationIds").val(num);
		$(this).parent().parent().siblings(".buyNums").val(num)
		totalPrice=totalPrice+num*price;
		
	})
	totalPrice=totalPrice.toFixed(2);
	$("#totalPrice").text(totalPrice);
}

/* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
    $("#myDropdown").parent().addClass("open");
    $("#tableContent").parent().css("overflow","hidden");
}

// 点击下拉菜单意外区域隐藏
window.onclick = function(event) {
    if (!event.target.matches('.dropbtn')) {
    	$("#myDropdown").parent().removeClass("open")
        var dropdowns = document.getElementsByClassName("dropdown-content");
    	$("#tableContent").parent().css("overflow","auto");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
                openDropdown.classList.remove('show');
            }
        }
    }
}

</script>
<script>
function queryCollocations(cargoId,shopId){
	var collocation;
	  
	var url =$.getVirtualPath()+"/wechat/shop/getCargoInfo";
    $.ajax({
        type: 'get',
        dataType: "json",
        url: url,
        data: "cargoId="+cargoId+"&shopId="+shopId,
        async: false,
        success: function (result) {
        	if(result!=null){
        		collocation=result.data;
        		$("#actionSheet").find(".xx12").find(".collocationOld").remove();
        		collocation.forEach(function(element,index){
        			
        			addCollocation(element);
        			console.log("胡茂树")
        		})
        		
    		}
       	}
    });
    totalPrice();
}


function addCollocation(element){
	console.log("wo")
	var collocation=$(".collocation").clone();
	collocation.removeClass("collocation");
	
	collocation.addClass("collocationOld");
	collocation.find(".aui-list-item").find(".aui-list-item-inner").find(".collocationId").attr("name","collocationId");
	if($.isNull(element.propertyNameTwo)){
		element.propertyNameTwo="";
	}
	if($.isNull(element.propertyNameOne)){
		element.propertyNameOne="";
	}
	
	collocation.find(".aui-list-item").find(".aui-list-item-inner").find(".collocationId").text(element.propertyNameOne+"*"+element.propertyNameTwo);
	collocation.find(".aui-list-item").find(".aui-list-item-inner").find(".realPrice").text(element.salePrice);
	collocation.find(".aui-list-item").find(".aui-list-item-inner").find(".collocationIds").val(element.collocationId);
	$("#collocationIndex").after(collocation);	
	var $myAs = $('.mask-black');
	var actionSheet=$("#actionSheet");
	
    $myAs.show();
	actionSheet.show();
}



</script>

<script type="text/javascript" >
var pageIndex = 1;
$(document).scroll(function(){
	if  ($(document).scrollTop() >= $(document).height() - $(window).height()) {
		var searchKey=$("#searchKey").val();

		var customerId=$("#customerId").val();
		pageIndex++;
		var shopId=$(".shopId").val();
		
		var url=$.getVirtualPath()+"/wechat/favorite/favoriteList?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId+"&searchKey="+searchKey+"&customerId="+customerId;
		var content=$.getText(url);
		
		$("#tableContent").append(content);
		pictureLoad();
		
	}
});

</script> 
<script type="text/javascript">
var pullRefresh = new auiPullToRefresh({
	container: document.querySelector('.aui-refresh-content'),
	triggerDistance: 100
},function(ret){
	if(ret.status=="success"){
		setTimeout(function(){
			var shopId=$(".shopId").val();
			var customerId=$("#customerId").val();
			url=$.getVirtualPath()+"/wechat/favorite/favoriteList?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId+"&customerId"+customerId;
			var content=$.getText(url);
			pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
		},1500)
	}
})
</script>

</body>
</html>
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp" %>
<%@ include file="/WEB-INF/views/shared/base/scripts/jqueryui.jsp"%>
